<template>
	<view class="nearby-store-btn e-flex" v-if="goodsInfo">
		<template v-if="SHOW_KEFU">
			<!-- #ifdef MP-WEIXIN -->
			<button open-type="contact" show-message-card
				class="app-mp-contact-btn text-center e-flex e-flex-column e-m-r-30">
				<image class="img-36" :src="$staticPath('classify/contact.png')"></image>
				<view class="e-font-20 c-666 keep-all">{{ $t('classify.客服') }}</view>
			</button>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<view class="text-center e-flex e-flex-column e-m-r-30" @tap="handleTapContactIcon">
				<image class="img-36" :src="$staticPath('classify/contact.png')"></image>
				<view class="e-font-20 c-666 keep-all">{{ $t('classify.客服') }}</view>
			</view>
			<!-- #endif -->
		</template>

		<view class="mene-item text-center e-flex e-flex-column" @tap="collect">
			<image class="img-36" :src="$staticPath('classify/collected.png') " v-if="goodsInfo.hasCollected == 1">
			</image>
			<image class="img-36" :src="$staticPath('classify/collect.png') " v-else></image>
			<view class="e-font-20 c-666 keep-all	"> {{$t('classify.收藏')}}</view>
		</view>
		<view class="e-flex-1 e-flex e-flex-end e-p-r-20">
			<view class="sub-btn e-flex e-flex-xy-center c-white fw-600 e-font-28 bg-primary" 
				@tap="emit('buy')">
				{{$t('nearby.立即抢购')}}
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	export default {
		// #ifdef MP-WEIXIN
		// 将自定义节点设置成虚拟的，更加接近Vue组件的表现，能更好的使用e-flex属性
		options: {
			virtualHost: true
		}
		// #endif
	}
</script>

<script setup lang="ts">
	import { postAddCollect, postDelCollect, getGoodsSkuDetail } from '@/common/request/api'
	import type { StoreGoodsDetail } from '@/common/request/api'
	import { SHOW_KEFU } from '@/env'

	const props = defineProps<{
		goodsInfo : StoreGoodsDetail
	}>()
	
	const emit = defineEmits(['update','buy'])
	
	const handleTapContactIcon = () => {

	}



	const collect = () => {

		let api = postAddCollect
		if (props.goodsInfo.hasCollected == 1) {
			api = postDelCollect
		}
		api({
			targetId: props.goodsInfo.productId
		},1).then(res => {
			emit('update')
		})
	}
</script>

<style lang="scss" scoped>
	.nearby-store-btn {
		position: fixed;
		z-index: 10060;
		width: 100vw;
		height: 56px;
		left: 0;
		bottom: 0;
		background: #fff;
		overflow: hidden;
		padding-left: 28rpx;
	}

	.sub-btn {
		min-width: 400rpx;
		height: 80rpx;
		border-radius: 200rpx;
	}
</style>